<template>
  <top></top>

  <div id="Content">
    <div id="BackLink">
      <a href="/catalog/view">Return to Main Menu</a>
    </div>

    <!--    <div id="Catalog">-->

    <div id="Cart">

        <span v-if="getItemOutOfStock.length!=0">
            <p style="color: red">
                商品
                <span v-for="item in itemOutOfStockList">
                    <a @click="viewProduct(item.productId)">{{item.productNameChinese}}</a>
                </span>
                库存不足
            </p>
        </span>

      <h2>Shopping Cart</h2>
      <form action="updateCart" method="post">
        <table>
          <tr>
            <th><b>Item ID</b></th>
            <th><b>Product ID</b></th>
            <th><b>Description</b></th>
            <th><b>In Stock?</b></th>
            <th><b>Quantity</b></th>
            <th><b>List Price</b></th>
            <th><b>Total Cost</b></th>
            <th>&nbsp;</th>
          </tr>
          <!-- 商品行 -->
          <tr v-for="cartItem in cartList" :key="cartItem.itemId">
            <td>{{cartItem.itemId}}</td>
            <td>{{cartItem.productId}}</td>
            <td>{{cartItem.productNameChinese}}</td>
            <td>{{cartItem.itemStock}}</td>
            <td>
              <input type="number" v-model="quantity" v-text="cartItem.quantity" @change="updateQuantity(cartItem)">
            </td>
            <td>{{cartItem.itemPrice}}</td>
            <td>{{quantity * cartItem.itemPrice}}</td>
            <td>
              <a @click="deleteItem(cartItem.itemId)">删除</a>
            </td>
          </tr>

        </table>
      </form>
      <span class="cart-link">
        <a v-if="cartList.length>0" @click="clearCart">Clear Cart</a>
      </span>
      <span class="cart-link">
        <a v-if="cartList.length>0" @click="goNewOrder">Proceed To Checkout</a>
      </span>
    </div>

    <div id="Separator">&nbsp;</div>

  </div>
  <bottom></bottom>
</template>

<script>
import Bottom from "@/App.vue";
import Top from "@/App.vue";
import axios from "axios";

export default {
  name: "cart",
  components: {Top, Bottom},
  data(){
    return{
      cartList:[],
      itemOutOfStockList:[],
      quantity:"",
    }
  },
  methods:{
    getCartList(){
      //获取购物车信息
      axios.get("http://localhost:8080/jpetstore/cart")
          .then((r) => {
            this.cartList = r.data.data;
          })
          .catch(err => {
            console.error("err when get cartList", err);
          });
    },
    viewProduct(productId){
      //跳转product信息
      this.$router.push({path:"/product",query:{productId}});
    },
    deleteItem(itemId){
      //删除item
      axios.delete("http://localhost:8080/jpetstore/cart/"+itemId.toString())
          .then((res)=>{
            if(res.data.data === "购物车宠物移除成功"){
              //更新购物车
              this.getCartList();
            }else {
              // //错误信息
              // console.error(res.data.data)
            }
          })
    },
    clearCart(){
      //删除后更新购物车
      for(let cartItem of this.cartList){
        axios.delete("http://localhost:8080/jpetstore/cart/"+cartItem.itemId.toString())
            .catch((err)=>{
              console.error('err in delete cartItem',err);
            });
      }
      this.getCartList();
    },
    goNewOrder(){
      //跳转到订单页面
      this.$router.push("/newOrder");
    },
    updateQuantity(cartItem){
      //更细quantity
      //没有修改购物车接口 先删再加
      axios.delete("http://localhost:8080/jpetstore/cart/"+cartItem.itemId.toString())
          .catch((err)=>{
            console.error('err in delete cartItem',err);
          });

      axios({
        method:"post",
        url:"http://localhost:8080/jpetstore/cart/",
        data:{
          productId:cartItem.productId,
          itemId:cartItem.itemId,
          quantity:this.quantity
        }
      })

      //可能需要同步cartList
    }
  },
  mounted(){
    //TODO 检查是否已经登录 没有接口


    this.getCartList();
  },
  computed:{
    getItemOutOfStock(){
      //获取库存不够的商品
      for(let item of this.cartList){
        if(item.quantity>item.itemStock){
          this.itemOutOfStockList.push(item);
        }
      }
      return this.itemOutOfStockList;
    }
  },
}
</script>

<style scoped>

</style>